<template>
  <div class="table-box">
    <KingTable ref="kingTable" :tableOptions="_tableOptions" @handle-btn-click="handleBtnAction">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button style="margin-bottom: 15px" type="primary" @click="handleExpandAll()">
          <el-icon><Fold v-if="isExpandAllTree" /><Expand v-else /> </el-icon>展开/收起
        </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.icon"></component>
        </el-icon>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button size="small" type="primary" @click="handleBtnAction(operateType.EDIT, scope.row)"> 编辑 </el-button>
      </template>
    </KingTable>
    <edit ref="editRef" @on-success="fetchTableData" />
  </div>
</template>

<script setup lang="tsx" name="GroupMenuOwnList">
import { ref, reactive } from "vue";
import KingTable from "@/components/KingTable/index.vue";
import { operateType } from "@/plugins/commonType.enum";
import { Expand, Fold } from "@element-plus/icons-vue";
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum";
import Edit from "./components/groupMenuOwnEdit.vue";

const isExpandAllTree = ref(false);

const editRef = ref();

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const kingTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _initParam = reactive({ pageNum: 1, pageSize: -1, EQ_ss: 1 });

// 表格配置项
const _tableCols = [
  { type: "selection", fixed: "left", align: "center", width: 60 },
  // { type: "index", label: "序号", align: "center", width: 60 },
  { type: TableColumnOrFormTypeEnum.TREENODE, label: "树节点", align: "center", width: 160 },
  {
    prop: "icon",
    label: "显示图标",
    width: 120
  },
  {
    prop: "menualias",
    label: "菜单名称",
    overflow: true
  },
  {
    prop: "showorder",
    label: "显示顺序",
    width: 180
  },
  {
    prop: "mts",
    label: "最后更新时间",
    width: 180
  },
  { prop: "operation", label: "操作", fixed: "right", width: 160 }
];

const _searchCols = [
  {
    prop: "nodename",
    label: "菜单名称",
    width: 100,
    el: "input"
  }
];

const _tableOptions = {
  title: "菜单列表",
  isDragRow: true,
  isDragCol: false,
  isTree: true, // 是否树列表
  treeRowField: "menuid",
  treeParentField: "parentid",
  pageable: false, // 是否分页
  queryUrl: "system/groupMenu/queryOwnMenuRes",
  operUrl: "system/groupMenu",
  tableColumns: _tableCols,
  searchColumns: _searchCols,
  initParam: _initParam
};

// 重新拉取表格数据
const fetchTableData = () => {
  kingTable.value?.getTableList();
};

//展开/折叠树
const handleExpandAll = () => {
  isExpandAllTree.value = !isExpandAllTree.value;
  kingTable.value?.handleExpandTree();
};

/**
 * 增删查按钮执行的业务操作
 * @param {*} type 当前执行操作的类型
 * @param {*} row
 */
const handleBtnAction = async (type: string, row: any) => {
  editRef.value.showDialog(row);
};
</script>
